import React, { useEffect, useState } from "react";
import {
    Button,
    Col,
    Drawer,
    Form,
    Input,
    message,
    Row,
    Table,
    TableProps,
    Tooltip,
} from 'antd';



import useResponsiveLayout from "@/utils/useResponsiveLayout";
import { importTable, listDbTable } from "@/clientApi/tool/gen";
import { globalMessage } from "@/utils/message";
// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    handleCancle: (e: any) => void;
}
const ImportTableView: React.FC<MyComponentProps> = (props) => {
    const initialQueryParams = {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined,

    };

    interface DataType {
    }
    const [open, setOpen] = useState<boolean>(false)//打开弹窗
    const [tables, setTables] = useState<any[]>([])
    const [form] = Form.useForm();
    const [dataList, setDataList] = useState<DataType[]>([]);
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '表名称',
            dataIndex: 'tableName',
            key: 'tableName',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (address) => (
                <Tooltip placement="topLeft" title={address}>
                    {address}
                </Tooltip>
            ),
        },
        {
            title: '表描述',
            dataIndex: 'tableComment',
            key: 'tableComment',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (address) => (
                <Tooltip placement="topLeft" title={address}>
                    {address}
                </Tooltip>
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (address) => (
                <Tooltip placement="topLeft" title={address}>
                    {address}
                </Tooltip>
            ),
        }, {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (address) => (
                <Tooltip placement="topLeft" title={address}>
                    {address}
                </Tooltip>
            ),
        },
    ];
    const [queryParams, setQueryParams] = useState(initialQueryParams);
    const [total, setTotal] = useState(0);
    useEffect(() => {
        getList();
        setOpen(props.open)
    }, [queryParams,props.open]);  // 监听 queryParams 变化，调用 getList
    /** 查询用户列表 */
    function getList() {
        listDbTable(queryParams).then((res: any) => {
            setDataList(res.rows.map((item: any) => ({
                ...item,
                key: item.tableName // 使用 tableName 作为唯一的 key
            })))
            setTotal(res.total); // 更新 total，用于分页
        });
    }

    // 查询列表
    function handleSearch() {
        form.validateFields().then(values => {
            console.log(values, 'values')
            setQueryParams(prevQueryParams => ({
                ...queryParams,
                tableName: undefined,
                tableComment: undefined,
            }));
        });
    }

    // 重置查询
    const resetSearch = () => {
        form.resetFields();
        setQueryParams(initialQueryParams); // 重置为初始状态
    }

    // 分页变化
    const handleTableChange = (page: number, pageSize: number) => {
        setQueryParams({
            ...queryParams,
            pageNum: page,
            pageSize: pageSize,
        });
    };
    const SelectTableChange = (record:any, selected:any, selectedRows:any) => {
        setTables(selectedRows.map((e:any) => e.tableName))
        console.log(selectedRows, "hahha")//给的值
    }
    const rowSelection: TableProps<DataType>['rowSelection'] = {
        type: "checkbox",
        onSelect: SelectTableChange,
        onSelectAll: SelectTableChange,
    }

    /** 导入按钮操作 */
    function handleImportTable() {
        const tableNames = tables.join(",");
        if (tableNames == "") {
             globalMessage().error("请选择要导入的表");
            return;
        }
        importTable({ tables: tableNames }).then((res: any) => {
             globalMessage().success(res.msg);
            if (res.code === 200) {
                props.handleCancle(false)
                setOpen(false)
            }
        });
    }
    return (
        <Drawer
            title="流程详情"
            placement="right"
            closable={false}
            onClose={() => { setOpen(false), props.handleCancle(false) }}
            open={open}
            footer={
                <div className={"flex justify-end"}>
                    <Button   type={"primary"} onClick={handleImportTable}>确认</Button>
                </div>
            }
            width={"70%"}
            key={"right"}
        >
            <div className='home'>
                <Row gutter={20} style={{ paddingTop: "20px" }}>
                    <Col span={24}>
                        <div><Form
                            form={form}
                            layout={useResponsiveLayout("inline")}
                            name="tool_gen_importTable"
                            style={{ marginTop: 10, marginLeft: 10, marginBottom: 10 }}>
                            <Form.Item
                                name="tableName"
                                label="表名称">
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="tableComment"
                                label="表描述">
                                <Input />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" onClick={handleSearch} style={{
                                }}>
                                    查询
                                </Button>
                                <Button type="primary" htmlType="reset" onClick={resetSearch}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Form></div>
                        <Table<DataType> rowKey="tableName"
                            columns={columns}
                            dataSource={dataList}
                            scroll={{x:'max-content'}}
                            pagination={{
                                current: queryParams.pageNum,
                                pageSize: queryParams.pageSize,
                                total: total,
                                showSizeChanger: true, // 显示分页尺寸切换器
                                pageSizeOptions: ['10', '20', '50'], // 分页尺寸选项
                                onShowSizeChange: handleTableChange, // 分页尺寸变化时的回调
                                onChange: handleTableChange
                            }} rowSelection={rowSelection} />
                    </Col>
                </Row>
            </div>
        </Drawer>
    )
};
export default ImportTableView;
